<template>
  <el-scrollbar class="page-container">
    <div class="page-wrapper">
      <div class="page-top" v-if="resData1 && resData2">
        <div class="left-view">
          <div class="count-list-container">
            <div class="desktop-pool-card" :style="`background-image: url(${desktopPoolCardImg})`" @click="$store.state.auth.authrole === 'system_admin' ? $router.push({name: 'DaaSDesktopPools'}): $router.push({name: 'DesktopPools'})">
              <div class="title">{{$t('objectType.desktop_pool')}}</div>
              <div class="count"><span class="main">{{ resData1.desktop_pool.total }}</span></div>
              <div class="tip">{{$t('objectType.total')}}</div>
            </div>
            <div class="client-card" :style="`background-image: url(${clientCardImg})`" @click="$router.push({name: 'ClientList'})">
              <div class="title">{{$t('objectType.desktop_client')}}</div>
              <div class="count"><span class="main">{{ resData1.desktop_client.online }}</span><span class="secondary">/{{ resData1.desktop_client.total }}</span></div>
              <div class="tip">{{$t('objectType.online')}}/{{$t('objectType.total')}}</div>
            </div>
            <div class="tenant-card" :style="`background-image: url(${tenantCardImg})`" v-if="$store.state.auth.authrole === 'system_admin'" @click="$router.push({name: 'TenantManageIndex'})">
              <div class="title">{{$t('common.tenants')}}</div>
              <div class="count"><span class="main">{{ resData2.tenant.total }}</span></div>
              <div class="tip">{{$t('objectType.total')}}</div>
            </div>
            <div class="user-card" :style="`background-image: url(${userCardImg})`" @click="$router.push({path: '/user/desktop_user'})">
              <div class="title">{{$t('route.user')}}</div>
              <div class="count"><span class="main">{{ resData2.ad_account.total }}</span></div>
              <div class="tip">{{$t('objectType.total')}}</div>
            </div>
          </div>
          <div class="desktop-run-card">
            <div class="main-title">
              <div class="icon"></div>
              <div class="content">{{$t('objectType.desktopRun')}}</div>
            </div>
            <div class="main">
              <div class="default-view">
                <div class="chart">
                  <div class="title">{{$t('objectType.common')}}</div>
                  <el-progress type="circle" :percentage="percentageCommon" :color="'#ffcd45'" :width="108"></el-progress>
                </div>
                <div class="chart-content">
                  <div class="chart-count">
                    <div>
                      <div style="display:flex;align-items: center">
                        <div style="width: 9px;height: 9px;background: #FFCD45;"></div>
                        <div style="padding-left:5px" class="chart-number">{{$t('objectType.connected')}}{{ resData1.desktop.common.running }}{{$t('objectType.sets')}}</div>
                      </div>
                      <div style="display:flex;align-items: baseline">
                        <div style="width: 9px;height: 9px;background: #DDDDDD;margin-top:32px"></div>
                        <div style="padding-left:5px" class="chart-number">{{$t('objectType.allNumber')}}{{ resData1.desktop.common.total }}{{$t('objectType.sets')}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-divider direction="vertical" style="height:112px;width:1px"></el-divider>
              <div class="plus-view">
                <div class="chart">
                  <div class="title">{{$t('objectType.flagship')}}</div>
                  <el-progress type="circle" :percentage="percentageEnhanced" :color="'#ff4a20'" :width="108"></el-progress>
                </div>
                <div class="chart-content">
                  <div class="chart-count">
                    <div>
                      <div style="display:flex;align-items: center">
                        <div style="width: 9px;height: 9px;background: #FF4A20;"></div>
                        <div style="padding-left:5px" class="chart-number">{{$t('objectType.connected')}}{{ resData1.desktop.enhanced.running }}{{$t('objectType.sets')}}</div>
                      </div>
                      <div style="display:flex;align-items: baseline">
                        <div style="width: 9px;height: 9px;background: #DDDDDD;margin-top:32px"></div>
                        <div style="padding-left:5px" class="chart-number">{{$t('objectType.allNumber')}}{{ resData1.desktop.enhanced.total }}{{$t('objectType.sets')}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="gpu-view">
                <div class="chart">
                  <div class="title">{{$t('objectType.gpu')}}</div>
                  <el-progress type="circle" :percentage="percentageGpu" :color="'#589bff'" :width="108"></el-progress>
                </div>
                <div class="chart-content">
                  <div class="chart-count">
                    <div>
                      <div style="display:flex;align-items: center">
                        <div style="width: 9px;height: 9px;background: #589BFF;"></div>
                        <div style="padding-left:5px" class="chart-number">{{$t('objectType.connected')}}{{ resData1.desktop.gpu.running }}{{$t('objectType.sets')}}</div>
                      </div>
                      <div style="display:flex;align-items: baseline">
                        <div style="width: 9px;height: 9px;background: #DDDDDD;margin-top:32px"></div>
                        <div style="padding-left:5px" class="chart-number">{{$t('objectType.allNumber')}}{{ resData1.desktop.gpu.total }}{{$t('objectType.sets')}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
          </div>
        </div>
        <div class="right-view">
          <div class="resource-card">
            <div class="resource-pool-view">
              <div class="icon-main">
                <i class="icon iconfont iconzhongyiicon_ziyuanchi" style="align-items: center;display: flex; color:#FFFFFF"></i>
              </div>
              <div class="content">
                <div class="title">{{$t('common.resourcePools')}}</div>
                <div class="count">
                  <span class="main">{{ resData1.resource_pool.total }}</span>
                  <span class="secondary">{{$t('common.ge')}}</span>
                </div>
              </div>
            </div>
            <div class="horizon-tenant-view">
              <div class="icon-main">
                <!-- <i class="icon iconfont iconzhongyiicon_Horizon" style="align-items: center;display: flex; color:#FFFFFF"></i> -->
                <i class="icon iconfont iconputongbanzuhu" style="align-items: center;display: flex; color:#FFFFFF"></i>
              </div>
              <div class="content">
                <div class="title">{{$t('resource.horizon')}}</div>
                <div class="count">
                  <span class="main">{{ resData1.resource_tenant.horizon }}</span>
                  <span class="secondary">{{$t('common.ge')}}</span>
                </div>
              </div>
            </div>
            <div class="daas-tenant-view">
              <div class="icon-main">
                <i class="icon iconfont iconqijianbanzuhu" style="align-items: center;display: flex; color:#FFFFFF"></i>
              </div>
              <div class="content">
                <div class="title">{{$t('resource.daas')}}</div>
                <div class="count">
                  <span class="main">{{ resData1.resource_tenant.daas }}</span>
                  <span class="secondary">{{$t('common.ge')}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-bottom">
        <!-- <div class="left-view" :style="$store.state.auth.authrole === 'tenant_admin'? 'width:50%':''">
          <div class="desktop-connect-container" :style="$store.state.auth.authrole === 'tenant_admin'? 'flex-direction: column;':''" >
            <div class="desktop-type-card" :style="$store.state.auth.authrole === 'tenant_admin'? 'margin-right:20px':'width:50%'" > -->
        <div class="left-view">
          <div class="desktop-connect-container">
            <div class="desktop-type-card" style="width:50%" >
              <div class="header">
                <div style="display:flex">
                  <div class="icon"></div>
                  <div class="title">{{$t('overview.chart1Title')}}</div>
                </div>
                <div class="actions">
                  <el-select v-model="resourceSelect1" placeholder="请选择" style="width:120px" @change="desktopChangePool">
                    <el-option
                      v-for="item in resource1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :title="item.label"
                    >
                    </el-option>
                  </el-select>
                  <el-select v-model="dataSelect1" placeholder="请选择" style="width:102px;margin-left:10px" @change="desktopChangeTime">
                    <el-option
                      v-for="item in data1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div id="chart-desktop" style="width:100%;height:90%" key="chart-desktop"></div>
            </div>
            <!-- <div class="client-type-card" :style="$store.state.auth.authrole === 'tenant_admin'? 'margin-top:20px;margin-right:20px':'margin-left:20px;width:50%'"> -->
            <div class="client-type-card" style="margin-left:20px;width:50%">
              <div class="header">
                <div style="display:flex">
                  <div class="icon"></div>
                  <div class="title">{{$t('overview.chart2Title')}}</div>
                </div>
                <div class="actions">
                  <el-select v-model="resourceSelect2" placeholder="请选择" style="width:120px" @change="clientChangePool">
                    <el-option
                      v-for="item in resource2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :title="item.label"
                    >
                    </el-option>
                  </el-select>
                  <el-select v-model="dataSelect2" placeholder="请选择" style="width:102px;margin-left:10px" @change="clientChangeTime">
                    <el-option
                      v-for="item in data2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div id="chart-client" style="width:100%;height:90%" key="chart-client"></div>
            </div>
          </div>
        </div>
        <!-- <div class="right-view" v-if="$store.state.auth.authrole != 'system_admin'"> -->
        <div class="right-view" v-if="false">
          <div class="user-log-card">
            <div class="header">
              <div style="display:flex">
                <div class="icon"></div>
                <div class="title">{{$t('logs.userLogs')}}</div>
              </div>
              <div class="actions">{{$t('common.More')}}<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="content" style="overflow:hidden">
              <el-timeline>
                  <el-timeline-item timestamp="2021-02-08 18：52：03" placement="top">
                    <el-card>
                      <h4>断开连接</h4>
                      <p>用户：admin断开连接 会话：admin&lt;-&gt;win7</p>
                      <p>结果：No Content</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2021-02-07 18：52：03" placement="top">
                    <el-card>
                      <h4>断开连接</h4>
                      <p>用户：admin断开连接 会话：admin&lt;-&gt;win7</p>
                      <p>结果：No Content</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2021-02-06 18：52：03" placement="top">
                    <el-card>
                      <h4>断开连接</h4>
                      <p>用户：admin断开连接 会话：admin&lt;-&gt;win7</p>
                      <p>结果：No Content</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>
<script lang="ts">
import Vue from 'vue'
import * as echarts from 'echarts';
import { AuthModule } from '../../store/modules/auth';
import { AppModule } from '../../store/modules/app';
import desktopPoolCardImg from '../../assets/overview-images/bj_03.png';
import clientCardImg from '../../assets/overview-images/bj_05.png';
import tenantCardImg from '../../assets/overview-images/bj_07.png';
import userCardImg from '../../assets/overview-images/bj_09.png';

declare module 'vue/types/vue' {
    interface Vue {
        [key: string]: any,
    }
}

export default Vue.extend({
  data() {
    return {
      resourceSelect1: '',
      resource1: [],

      resourceSelect2: '',
      resource2: [],

      dataSelect1: 'week',
      data1: [{
        value: 'day',
        label: this.$t('overview.day')
      },{
        value: 'week',
        label: this.$t('overview.week')
      },{
        value: 'month',
        label: this.$t('overview.month')
      }],

      dataSelect2: 'week',
      data2: [{
        value: 'day',
        label: this.$t('overview.day')
      },{
        value: 'week',
        label: this.$t('overview.week')
      },{
        value: 'month',
        label: this.$t('overview.month')
      }],
      chartDesktop: '',
      chartClient: '',
      resData1: '',
      resData2: '',
      time1: '',
      time2: '',
      desktopPoolCardImg: desktopPoolCardImg,
      clientCardImg: clientCardImg,
      tenantCardImg: tenantCardImg,
      userCardImg: userCardImg
    }
  },
  computed: {
    AuthModule: () => AuthModule,
    percentageCommon: function() {
      if((this as any).resData1.desktop.common.running === 0){
        return 0;
      }
      return Number((((this as any).resData1.desktop.common.running / (this as any).resData1.desktop.common.total) * 100 as any).toFixed(1));
    },
    percentageEnhanced: function() {
      if((this as any).resData1.desktop.enhanced.running === 0){
        return 0;
      }
      return Number((((this as any).resData1.desktop.enhanced.running / (this as any).resData1.desktop.enhanced.total) * 100 as any).toFixed(1));
    },
    percentageGpu: function() {
      if((this as any).resData1.desktop.gpu.running === 0){
        return 0;
      }
      return Number((((this as any).resData1.desktop.gpu.running / (this as any).resData1.desktop.gpu.total) * 100 as any).toFixed(1));
    }
  },
  created() {
    // console.log(this.$route);
    AppModule.SetWorkOrderNumber();
    if (this.$route.query) {
      AuthModule.SetToken((this as any).$route.query.token)
    }
  },
  destroyed() {
    clearInterval(this.time1)
    clearInterval(this.time2)
  },
  mounted() {
    let that = this
    
    if (this.$store.state.auth.authrole != 'system_admin') {
      (this as any).$pandaApi.apiGetOverviewTenant().then((res: any) => {
        (this as any).resData1 = res;
      });
      (this as any).$tunnyApi.apiGetOverviewTenant().then((res: any) => {
        (this as any).resData2 = res;
      });
    }else {
      (this as any).$pandaApi.apiGetOverview().then((res: any) => {
        (this as any).resData1 = res;
      });
      (this as any).$tunnyApi.apiGetOverview().then((res: any) => {
        (this as any).resData2 = res;
      });
    }
    this.resource1 = [];
    this.resource2 = [];
    this.$pandaApi.apiGetResourceList().then((res: any) => {
      res = res.sort((a: any, b: any) => (a.name).localeCompare((b.name), 'zh-Hans-CN', { sensitivity: 'accent' }));
      this.resource1.push({
        value: '',
        label: this.$t('overview.allPool')
      })
      this.resource2.push({
        value: '',
        label: this.$t('overview.allPool')
      })
      for(let i = 0;i<res.length;i++) {
        let k = {
          value: res[i].id,
          label: res[i].name
        }
        this.resource1.push(k)
        this.resource2.push(k)
      };
      this.resourceSelect1 = this.resource1[0].value;
      this.resourceSelect2 = this.resource2[0].value;

      (this as any).$nextTick(() => {
        (this as any).chartDesktop = document.getElementById('chart-desktop');
        (this as any).chartClient = document.getElementById('chart-client');
        (this as any).initDesktop(this.resourceSelect1, 'week');
        (this as any).initClient(this.resourceSelect2, 'week');

        this.time1 = setInterval(function(){that.initDesktop(that.resourceSelect1, that.dataSelect1)},30000);
        this.time2 = setInterval(function(){that.initClient(that.resourceSelect2, that.dataSelect2)},30000);
      })
    });
  },
  methods: {
    desktopChangePool() {
      this.initDesktop(this.resourceSelect1, this.dataSelect1)
    },
    desktopChangeTime() {
      this.initDesktop(this.resourceSelect1, this.dataSelect1)
    },
    clientChangePool() {
      this.initClient(this.resourceSelect2, this.dataSelect2)
    },
    clientChangeTime() {
      this.initClient(this.resourceSelect2, this.dataSelect2)
    },
    async initDesktop(pool: any, time: any) {
      const params = {
        resource_pool_id: pool,
        section: time
      }
      await this.$pandaApi.apiGetReports(params).then((res: any) =>{
        let xdata: any = [];
        let ydata1: any = [];
        let ydata2: any = [];
        let ydata3: any = [];

        for(let i=0;i<res.length;i++) {
          xdata.push(res[i].report_at);
          ydata1.push(res[i].value_of_common ? res[i].value_of_common : 0);
          ydata2.push(res[i].value_of_enhanced ? res[i].value_of_enhanced : 0);
          ydata3.push(res[i].value_of_gpu? res[i].value_of_gpu : 0);
        }
        let myChart = echarts.init((this as any).chartDesktop as any);
        let option;
        const colors = ['#589BFF','#FFCD45','#FF4A20']
        option = {
          color: colors,
          legend: {
            data: [this.$t('objectType.common'), this.$t('objectType.flagship'), this.$t('objectType.gpu')]
          },
          tooltip: {
              trigger: 'axis'
          },
          xAxis: {
            data: xdata,
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          series: [{
            name: this.$t('objectType.common'),
            data: ydata1,
            type: 'line',
            smooth: true
          },{
            name: this.$t('objectType.flagship'),
            data: ydata2,
            type: 'line',
            smooth: true
          },{
            name: this.$t('objectType.gpu'),
            data: ydata3,
            type: 'line',
            smooth: true
          }]
        };

        option && myChart.setOption(option as any);
        myChart.resize()
      })
    },

    async initClient(pool: any, time: any) {
      const params = {
        resource_pool_id: pool,
        section: time
      };
      await this.$pandaApi.apiGetReports(params).then((res: any) =>{
        let xdata: any = [];
        let ydata1: any = [];
        let ydata2: any = [];

        for(let i=0;i<res.length;i++) {
          xdata.push(res[i].report_at);
          ydata1.push(res[i].value_of_x86_windows ? res[i].value_of_x86_windows : 0);
          ydata2.push(res[i].value_of_x86_ubuntu ? res[i].value_of_x86_ubuntu : 0);
        }
        let myChart = echarts.init((this as any).chartClient as any);
        let option;
        const colors = ['#04B425','#00CFC3']
        option = {
          color: colors,
          legend: {
            data: [this.$t('overview.windows'), this.$t('overview.x86')]
          },
          tooltip: {
              trigger: 'axis'
          },
          xAxis: {
            data: xdata
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          series: [{
            name: this.$t('overview.windows'),
            data: ydata1,
            type: 'line',
            smooth: true
          },{
            name: this.$t('overview.x86'),
            data: ydata2,
            type: 'line',
            smooth: true
          }]
        };

        option && myChart.setOption(option as any);
        window.onresize = () => {
          myChart.resize()
          let myChart2 = echarts.init((this as any).chartDesktop as any);
          myChart2.resize()
      }
      })
    }
  }
  
})
</script>
<style lang="scss" scoped>
  .page-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #EFF1F4;

    .page-wrapper {
      margin: 15px;
    }

    .page-top {
      display: flex;

      .left-view {
        flex-grow: 1;

        .count-list-container {
          display: flex;
          justify-content: space-between;

          .desktop-pool-card, .client-card, .tenant-card, .user-card {
            padding: 12px 24px;
            flex-grow: 1;
            background-size: cover;
            background-position: center center;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.4s;

            &:hover {
              // transform: scale(1.1);
              box-shadow: 0px 0px 20px #bcbcbc;
            }
            

            * {
              color: #FFFFFF;
            }

            .title {
              font-size: 14px;
              font-weight: bold;
              margin-bottom: 23px;
            }

            .count {
              margin-bottom: 7px;

              .main {
                font-size: 28px;
                font-weight: bold;
                height: 20px;
                font-size: 28px;
                font-weight: 400;
                color: #FFFFFF;
              }

              .secondary {
                font-size: 14px;
                font-weight: bold;
              }
            }

            .tip {
              font-size: 12px;
              font-weight: bold;
              height: 12px;
              font-weight: 400;
              color: #FFFFFF;
              opacity: 0.54;
            }
          }

          .client-card, .tenant-card, .user-card {
            margin-left: 20px;
          }

          // .desktop-pool-card {
          //   background-image: url(~@/assets/overview-images/bj_03.png);
          // }

          // .client-card {
          //   background-image: url(~@/assets/overview-images/bj_05.png);
          // }

          // .tenant-card {
          //   background-image: url(~@/assets/overview-images/bj_07.png);
          // }

          // .user-card {
          //   background-image: url(~@/assets/overview-images/bj_09.png);
          // }
        }

        .desktop-run-card {
          margin-top: 20px;
          width: 100%;
          height: 252px;
          background: #FFFFFF;
          border-radius: 10px;

          .main-title {
            padding: 20px 0px 0px 20px;
            display: flex;
            .icon {
              width: 3px;
              height: 17px;
              background: #337DFF;
            }
            .content {
              margin-left: 7px;
              font-size: 16px;
              font-weight: bold;
              color: #333333;
            }
          }

          .main {
            display: flex;
            justify-content: space-around;
                        &:before,
            &:after {
                content: "";
                display: block;
            }

            align-items: center;
            margin-top: 40px;

            .default-view, .plus-view, .gpu-view {
              display: flex;
              flex-direction: row;
              align-items: center;

              .chart {
                display: flex;
                flex-direction: column;
                align-items: center;

                .title {
                  font-size: 14px;
                  font-weight: bold;
                  color: #333333;
                  padding-bottom: 16px;
                }
              }

              

              .chart-content {
                margin-top: 16px;
                display: flex;
                align-items: center;

                .chart-count {
                  margin-left: 20px;
                  display: flex;
                }

                .chart-number {
                  font-size: 14px;
                  font-weight: bold;
                  color: #333333;
                }
              }
            }
          }
        }
      }

      .right-view {
        margin-left: 15px;
        flex-shrink: 0;
        height: 386px;

        .resource-card {
          min-width: 222px;
          padding: 20px 16px;
          background-color: #FFFFFF;
          border-radius: 10px;
        }

        .resource-pool-view {
          background: #FFF9EF;

          .icon-main {
            width: 56px;
            height: 56px;
            background: linear-gradient(176deg, #F7CA72, #FF8933);
            border-radius: 50%;
            display: flex;
            justify-content: center;
          }
        }

        .horizon-tenant-view {
          margin-top: 20px;
          background: #FEF7FF;

          .icon-main {
            width: 56px;
            height: 56px;
            background: linear-gradient(176deg, #FA82FE, #A758FF);
            border-radius: 50%;
            display: flex;
            justify-content: center;
          }
        }

        .daas-tenant-view {
          margin-top: 20px;
          background: #F5FFFF;

          .icon-main {
            width: 56px;
            height: 56px;
            background: linear-gradient(176deg, #82FDFE, #589BFF);
            border-radius: 50%;
            display: flex;
            justify-content: center;
          }
        }
        .resource-pool-view, .horizon-tenant-view, .daas-tenant-view {
          padding: 23px 11px;
          display: flex;
          align-items: center;

          .content {
            margin-left: 8px;
            .title {
              font-size: 14px;
              font-weight: bold;
              color: #333333;
            }

            .count {
              .main {
                font-size: 24px;
                font-weight: bold;
                color: #333333;
              }

              .secondary{
                font-size: 14px;
                color: #333333;
              }
            }
          }
        }
      }
    }

    .page-bottom {
      display: flex;
      margin-top: 20px;

      .left-view {
        flex-grow: 1;
        flex-shrink: 0;

        .desktop-connect-container {
          display: flex;
          width:100%;
          .desktop-type-card, .client-type-card {
            height: 364px;
            background: #FFFFFF;
            border-radius: 10px;
            // width:50%;

            .header {
              padding: 20px 0px 0px 20px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .icon {
                width: 3px;
                height: 17px;
                background: #337DFF;
              }
              .title {
                font-size: 16px;
                font-weight: bold;
                color: #333333;
                margin-left: 7px;
              }
              .actions {
                margin-right: 20px
              }
            }
          }
        }
      }

      .right-view {
        flex-grow: 1;
        flex-shrink: 0;
        width: 30vw;
        .user-log-card {
          background: #FFFFFF;
          // width: 50%;
          .header {
            padding: 20px 0px 0px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .icon {
              width: 3px;
              height: 17px;
              background: #337DFF;
            }
            .title {
              font-size: 16px;
              font-weight: bold;
              color: #333333;
              margin-left: 7px;
            }
            .actions {
              margin-right: 20px;
              font-size: 16px;
              font-weight: bold;
              color: #333333;
              
            }
          }

          .content {
            margin-top: 20px;
            margin-right:20px;
            height: 690px;
          }

          
        }
      }
    }
  }

  .el-divider--vertical {
    height: 112px;
  }
  .iconzhongyiicon_ziyuanchi:before {
    font-size: 33px;
  }
  .iconputongbanzuhu:before {
    font-size: 34px;
  }
  .iconqijianbanzuhu:before {
    font-size: 34px;
  }
</style>
